<script lang="ts">
	import Dialog, { Title, Content, Actions } from '@smui/dialog';
	import Button, { Label } from '@smui/button';
	import { createEventDispatcher } from 'svelte';
	import { createMessage } from '../message';

	export let open = true;
	export let danger = false;
	const dispatch = createEventDispatcher();
	const cancel = () => {
		open = false;
		dispatch('cancel');
	};
	const confirm = async () => {
		open = false;
		const instance = createMessage({ loading: true, message: 'Loading...', type: 'light' });
		await dispatch('confirm');
		instance.update_loading_to_success();
	};

	export let content: string = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc id aliquet
			tincidunt, nisl nunc tincidunt nunc, id lacinia nunc nunc id nunc. Sed euismod, nunc id
			aliquet tincidunt, nisl nunc tincidunt nunc, id lacinia nunc nunc id nunc.`;
	export let title: string = 'Dialog Title';
	export let icon: string = 'info';
</script>

<Dialog bind:open>
	<div
		class="dialog-width w-560px! h-5px w-full"
		style={`background: ${danger ? '#f87171' : 'var(--mdc-theme-primary)'}`}
	></div>
	<Title
		class="flex justify-start items-center gap-10px line-height-60px h-full pl-12px! "
		id="simple-title"
	>
		{#if icon}
			<span class="material-symbols-outlined">
				{icon}
			</span>
		{/if}
		<span>{title}</span>
	</Title>
	<Content>
		{#if !$$slots.default}
			<p>
				{content}
			</p>
		{/if}
		<slot />
	</Content>
	<Actions>
		<Button on:click={cancel}>
			<Label>No</Label>
		</Button>
		<Button on:click={confirm}>
			<Label>Yes</Label>
		</Button>
	</Actions>
</Dialog>
